require([
    'jquery',
    'bootstrap',
    'dataTables',
    'dataTablesBts',
    'css!../../js/bootstrap/css/bootstrap.css',     //css路径写法
    'css!../../js/dataTables/css/dataTables.bootstrap.css'
], function ($, bootstrap, dataTables, dataTablesBts) {

    $(document).ready(function () {

        var table = $('#myTable').DataTable({
            paging: true,
            processing:false,
            searching: true,
            lengthMenu:[5, 10, 20, 50, 100],
            scrollY: 255,//垂直滚动条
            scrollX:true,//水平滚动条
            //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
            //data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
            columns: [
                {
                    sTitle: '序号',
                    data: null,
                    className: 'text-center whiteSpace',
                    render:function(data,type,row,meta) {
                        return meta.row + 1 +
                            meta.settings._iDisplayStart;
                    }},
                { data: 'userId',visible:false },
                { data: 'username'  ,'bSortable':false },  // 排序
                { data: function (data) {
                    if ( data.gender == 1 ){
                        return '男';
                    }
                    if( data.gender == 0 ){
                        return '女';
                    }
                    } },
                { data: 'year' },
                { data: 'areaName' ,'bSortable':false},
                { data: 'phone' ,'bSortable':false},
                { data: 'email','bSortable':false },
                { data: function ( data  ) {
                        var userId = data.userId;
                        var html = "<button class='btn btn-default btn-warning' id='upt"+userId+"' >修改</button>";
                        html +="&nbsp;&nbsp;&nbsp;&nbsp;";
                        html += "<button class='btn btn-default btn-danger' id='del"+userId+"'>删除</button>";
                        return html;
                    },'bSortable':false}

            ],
            createdRow: function ( row, data ) {//筛选显示，大于23岁红色字体
                if ( data.year.replace(/[\$,]/g, '') * 1  > 23 ) {
                    $('td', row).eq(3).css('font-weight',"bold").css("color","red");
                }
            },
            serviceSize:true,
            ajax:{
                type:'POST',
                url:'../dataTables/ajax/arrays.json',
                dataSrc: 'data'
            },
            language: {//中文设置
                url:"../../txt/zh_CN.txt"
            },
            fnDrawCallback : function () {
                var api = this.api();
                api.column(0).nodes().each(function(cell, i) {
                    cell.innerHTML = i + 1;
                });
            },
            "footerCallback": function ( row, data, start, end, display ) {
                var api = this.api(), data;

                // Remove the formatting to get integer data for summation
                var intVal = function ( i ) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '')*1 :
                        typeof i === 'number' ?
                            i : 0;
                };

                // Total over all pages
                total = api
                    .column( 4 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                // Total over this page
                pageTotal = api
                    .column( 4, { page: 'current'} )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                // Update footer
                $( api.column( 4 ).footer() ).html(
                    '本页年龄之和：'+pageTotal +' ( 总年龄之和：'+ total +' )'
                );
            }

        } );

        $('#js-export').click(function(){
            window.location.href="../export/export";
        });


        $("input:checkbox").on( 'click', function (e) {
            var column = table.column( $(this).attr('data-column') );
            column.visible( ! column.visible() );
            //阻止事件冒泡 目的是不使下拉列表隐藏，如果不加这句话就会每点击一行，下拉列表就隐藏咯
            e.stopPropagation();
        } );



    });

});

